<template>
	<view style="padding: 20rpx 32rpx;">
		<view class="usermain u-bdr-12">
			<view class="usermain-item item-padding u-border-bottom">
				<view class="label_text">任务标题</view>
				<view class="valuscss">
					<view class="cu-form-group">
						<input type="text" v-model="title" placeholder="请输入任务标题内容" />
					</view>
				</view>
			</view>
			<view class="usermain-item u-border-bottom">
				<view class="label_text" style="padding-bottom: 20rpx;">海报</view>
				<view class="valuscss">
					<view style="display: flex;flex-wrap: wrap;">
						<view style="margin-right: 10rpx;position: relative;margin-bottom: 10rpx;" v-if='titleImg'
							@click.stop="previewImage(0,[titleImg])">
							<image src='../../../static/images/me/closeIconss.png'
								style="width: 30rpx;height: 30rpx;position: absolute;right: 0;top: -10rpx;z-index: 10;"
								@click.stop="titleImg=''"></image>
							<image :src='titleImg' mode="aspectFill" style="width: 150rpx;height: 150rpx;"></image>
						</view>
						
						<view style="width: 150rpx;
						height: 150rpx;
						background: #F7F7F7;
						display: flex;
						align-items: center;
						justify-content: center;
						" @click="uploadImgTitleImg" v-if='titleImg==""'>
													<image src='/static/images/me/cam.png' style="width: 50rpx;height: 44rpx;"
														></image>
												</view>
												
												
					
					</view>
				</view>
			</view>
			<view class="usermain-item u-border-bottom">
				<view class="label_text"  style="padding-bottom: 20rpx;">详情介绍</view>
				<view class="valuscss">
					<view style="display: flex;flex-wrap: wrap;">
						<view style="margin-right: 10rpx;position: relative;margin-bottom: 10rpx;" v-if='img'
							@click.stop="previewImage(0,[img])">
							<image src='../../../static/images/me/closeIconss.png'
								style="width: 30rpx;height: 30rpx;position: absolute;right: 0;top: -10rpx;z-index: 10;"
								@click.stop="img=''"></image>
							<image :src='img' mode="aspectFill" style="width: 150rpx;height: 150rpx;"></image>
						</view>
						
						<view style="width: 150rpx;
						height: 150rpx;
						background: #F7F7F7;
						display: flex;
						align-items: center;
						justify-content: center;
						"
						@click="uploadImgImg"
						v-if='img===null'
						>
													<image src='/static/images/me/cam.png' style="width: 50rpx;height: 44rpx;"
														></image>
												</view>
												
												
						
					</view>
				</view>
			</view>
			<view class="usermain-item  u-border-bottom">
				<view class="label_text">推广内容</view>
				<u-input v-model="describeText" type="textarea" placeholder='请输入推广内容'/>
			</view>
			<view class="usermain-item item-padding u-border-bottom">
				<view class="label_text">单价</view>
				<view class="valuscss">
					<view class="cu-form-group">
						<input type="decimal" v-model="goodsPrice" placeholder="请输入单价" />
					</view>
				</view>
			</view>
			<view class="usermain-item item-padding u-border-bottom">
				<view class="label_text">达到曝光量</view>
				<view class="valuscss">
					<view class="cu-form-group">
						<input type="decimal" v-model="exposureNum" placeholder="请输入曝光量" />
					</view>
				</view>
			</view>
			<view class="usermain-item item-padding u-border-bottom">
				<view class="label_text">商品总数</view>
				<view class="valuscss">
					<view class="cu-form-group">
						<input type="number" v-model="sumNum" placeholder="请输入商品总数" />
					</view>
				</view>
			</view>
			<view class="usermain-item item-padding u-border-bottom">
				<view class="label_text">是否上架</view>
				<view class="valuscss">
					<view class="cu-form-group">
						<u-radio-group v-model="status">
							<u-radio name="1" activeColor="#FD7885">
								上架
							</u-radio>
							<u-radio name="2" activeColor="#FD7885">
								下架
							</u-radio>
						</u-radio-group>
					</view>
				</view>
			</view>

		</view>
		<view class="footer-btn">
			<view class="usermain-btn" @click="messagebtn()">立即提交</view>
		</view>
		<u-popup v-model="showJd" round="10" closeOnClickOverlay="false" width="300" mode="center" border-radius="14"
			style="text-align: center;">
			<view>
				<text>{{progressBar}}</text>
			</view>
		</u-popup>
	</view>

</template>

<script>
	import configdata from '../../../common/config.js';
	export default {
		data() {
			return {
				showJd: false,
				id: null,
				title: null,
				titleImg: '',
				describeText: '',
				img: null,
				sumNum: null,
				status: 1,
				goodsPrice: 1.0,
				editType: 0, //0 add 1edit
				courseDetailsId: null,
				progressBar: 0,
				exposureNum:0
			};
		},
		onLoad(e) {
			this.editType = e.type
			if (e.type == 0) {
				uni.setNavigationBarTitle({
					title: '新增任务'
				});
			} else {
				this.id = e.spreadId
				uni.setNavigationBarTitle({
					title: '编辑任务'
				});
				this.getProductInfo(this.id)
			}
		},
		methods: {

			//放大图片
			previewImage(e, url) {
				uni.previewImage({
					urls: url,
					current: e
				});
			},

			// 资源详情 获取
			getProductInfo(id) {

				this.$u.get("/app/spreader/getProductInfo?id=" + id).then(
					res => {
						if (res.code === 0) {
							this.id = res.data.id
							this.title = res.data.title
							this.titleImg = res.data.titleImg
							this.describeText = res.data.describeText
							this.img = res.data.img
							this.sumNum = res.data.sumNum
							this.status = res.data.status
							this.goodsPrice = res.data.goodsPrice
							this.exposureNum = res.data.exposureNum
						}
					});
			},
			// titleImg
			onChooseTitleImg(e) {
				let that = this;
				let url = ''
				let token = uni.getStorageSync('token');
				uni.showLoading({
					title: '上传中...'
				});
				uni.uploadFile({
					url: configdata.APIHOST + '/alioss/upload',
					filePath: e.detail.avatarUrl,
					header: {
						token: token
					},
					name: 'file',
					success: uploadFileRes => {
						url = JSON.parse(uploadFileRes.data);
						that.titleImg = url.data
						uni.hideLoading();
					}
				});

			},
			// titleImg
			onChooseImg(e) {
				let that = this;
				let url = ''
				let token = uni.getStorageSync('token');
				uni.showLoading({
					title: '上传中...'
				});
				uni.uploadFile({
					url: configdata.APIHOST + '/alioss/upload',
					filePath: e.detail.avatarUrl,
					header: {
						token: token
					},
					name: 'file',
					success: uploadFileRes => {
						url = JSON.parse(uploadFileRes.data);
						that.titleImg = url.data
						uni.hideLoading();
					}
				});

			},
			// bannerImg
			onChooseBannerImg(e) {
				let that = this;
				let url = ''
				let token = uni.getStorageSync('token');
				uni.showLoading({
					title: '上传中...'
				});
				uni.uploadFile({
					url: configdata.APIHOST + '/alioss/upload',
					filePath: e.detail.avatarUrl,
					header: {
						token: token
					},
					name: 'file',
					success: uploadFileRes => {
						url = JSON.parse(uploadFileRes.data);
						that.bannerImg.push(url.data)
						uni.hideLoading();
					}
				});

			},
			uploadImgTitleImg() {
				let token = uni.getStorageSync('token')

				if (!token) {
					this.goLoginInfo();
					return;
				}
				let that = this;
				var url = null;
				uni.showActionSheet({
					// itemList按钮的文字接受的是数组
					itemList: ["从相册选择图片"],
					success(e) {
						var index = e.tapIndex
						uni.chooseImage({
							count: 1, //默认9
							sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
							sourceType: ['album'], //从相册选择
							success: function(res) {
								uni.showLoading({
									title: '上传中...'
								});
								let token = uni.getStorageSync('token');
								let userId = uni.getStorageSync('userId');
								uni.uploadFile({
									url: configdata.APIHOST + '/alioss/upload',
									filePath: res.tempFilePaths[0],
									name: 'file',
									success: uploadFileRes => {
										uni.hideLoading();
										url = JSON.parse(uploadFileRes.data);
										console.log(url)
										that.titleImg = url.data
									}
								});
							}
						});
					}
				})
			},
			uploadImgImg() {
				let token = uni.getStorageSync('token')

				if (!token) {
					this.goLoginInfo();
					return;
				}
				let that = this;
				var url = null;
				uni.showActionSheet({
					// itemList按钮的文字接受的是数组
					itemList: ["从相册选择图片"],
					success(e) {
						var index = e.tapIndex
						uni.chooseImage({
							count: 1, //默认9
							sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
							sourceType: ['album'], //从相册选择
							success: function(res) {
								uni.showLoading({
									title: '上传中...'
								});
								let token = uni.getStorageSync('token');
								let userId = uni.getStorageSync('userId');
								uni.uploadFile({
									url: configdata.APIHOST + '/alioss/upload',
									filePath: res.tempFilePaths[0],
									name: 'file',
									success: uploadFileRes => {
										url = JSON.parse(uploadFileRes.data);
										console.log(url)
										that.img = url.data
									}
								});
							}
						});
					}
				})
			},
			config: function(name) {
				var info = null;
				if (name) {
					var name2 = name.split("."); //字符分割
					if (name2.length > 1) {
						info = configdata[name2[0]][name2[1]] || null;
					} else {
						info = configdata[name] || null;
					}
					if (info == null) {
						let web_config = cache.get("web_config");
						if (web_config) {
							if (name2.length > 1) {
								info = web_config[name2[0]][name2[1]] || null;
							} else {
								info = web_config[name] || null;
							}
						}
					}
				}
				return info;
			},
			// 保存
			messagebtn() {
				if (this.title == '') {
					uni.showToast({
						title: "请输入名称",
						icon: "none"
					})
					return
				}
				if (this.title == '') {
					uni.showToast({
						title: "请填写任务标题",
						icon: "none"
					})
					return
				}
				if (this.titleImg == '') {
					uni.showToast({
						title: "请上传海报",
						icon: "none"
					})
					return
				}
				if (this.describeText == '') {
					uni.showToast({
						title: "请填写介绍",
						icon: "none"
					})
					return
				}
				if (this.img == '') {
					uni.showToast({
						title: "请上传详情",
						icon: "none"
					})
					return
				}
				if (this.goodsPrice == '') {
					uni.showToast({
						title: "请填写推广金",
						icon: "none"
					})
					return
				}
				var that = this
				uni.showModal({
					title: '温馨提示',
					content: '确定保存信息',
					confirmColor: '#8B8FF0',
					success: e => {
						if (e.confirm) {
							var data = {
								title: this.title,
								titleImg: this.titleImg,
								describeText: this.describeText,
								img: this.img,
								sumNum: this.sumNum,
								status: this.status,
								goodsPrice: this.goodsPrice,
								exposureNum: this.exposureNum
							}
							if (that.editType == 0) {
								this.$u.post("/app/spreader/saveProductInfo", data).then(res => {
									if (res.code === 0) {
										uni.showToast({
											title: '新增成功',
											icon: "none"
										})
										setTimeout(function() {
											uni.navigateBack()
										}, 1000)
									} else {
										uni.showToast({
											title: res.msg,
											icon: "none"
										})
									}
								});
							} else {
								data.id = this.id
								this.$u.post("/app/spreader/saveProductInfo", data).then(res => {
									if (res.code === 0) {
										uni.showToast({
											title: '编辑成功',
											icon: "none"
										})
										setTimeout(function() {
											uni.navigateBack()
										}, 1000)
									} else {
										uni.showToast({
											title: res.msg,
											icon: "none"
										})
									}
								});
							}


						}
					}
				});
			}
		}
	};
</script>

<style>
	page {
		background: #F7F8FF;
	}

	button::after {
		border: none;
		background-color: none;
	}

	button {
		position: relative;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		text-decoration: none;
		line-height: 1.35;
		overflow: hidden;
		color: #666666;
		/* background-color: #fff; */
		background-color: rgba(255, 255, 255, 0) !important;
		width: 100%;
		height: 100%;
	}

	.usermain {
		/* background: #FFFFFF; */
	}

	.usermain-item {
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 26rpx 16rpx;
		margin-bottom: 20rpx;
		/* border-bottom: 2rpx solid #f2f2f2; */
	}

	.usermain-item.item-padding {
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* padding: 10rpx 40rpx 10rpx 0; */
	}

	.valuscss {
		/* width: 80%; */
	}

	.cu-form-group {
		padding: 0;
		background: #FFFFFF;
		min-height: auto !important;
		/* text-align: right; */
	}

	.cu-form-group input {
		background: #FFFFFF;
		font-size: 28rpx;
		color: #333333;
		text-align: right;
	}

	.footer-btn {
		margin-top: 40rpx;
	}

	.footer-btn .usermain-btn {
		color: #FFFFFF;
		background: linear-gradient(90deg, #ff7581, #f8a5af);
		text-align: center;
		width: 686rpx;
		height: 80rpx;
		font-size: 28rpx;
		line-height: 80rpx;
		margin: 0 auto;
		border-radius: 40rpx;
	}

	.label_text {
		font-weight: bold;
		font-size: 28rpx;
		color: #1A1A1A;
	}
</style>